<template>
  <div id="release-task-body">
    <header id="header" class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @click="$router.goBack()"></a>
      <h1 class="mui-title">发布任务</h1>
      <button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" @click="releaseTask">发布</button>
    </header>
    <div id="release-task-content">
      <div class="mui-input-row">
        <label>任务标题:</label>
        <input type="text" v-model="task_title" placeholder="任务标题" />
      </div>
      <div class="mui-input-row">
        <label>指派给:</label>
        <input
          type="text"
          v-model="targetShowName"
          placeholder="选择指派人"
          @click="taskTargetShow = true"
        />
      </div>
      <div class="mui-input-row">
        <label>开始时间:</label>
        <input
          type="text"
          v-model="taskReleaseTime"
          placeholder="开始时间"
          @click="releaseTimeShow = true"
        />
      </div>
      <div class="mui-input-row">
        <label>截止时间:</label>
        <input type="text" v-model="taskEndTime" placeholder="截止时间" @click="endTimeShow = true" />
      </div>
      <div class="mui-input-row">
        <label>任务内容:</label>
      </div>
      <quill-editor v-model="content" ref="myQuillEditor" style="height:260px"></quill-editor>
    </div>
    <van-popup v-model="releaseTimeShow" position="bottom" :style="{ height: '250px' }">
      <van-datetime-picker
        v-model="pickerReleaseTime"
        type="date"
        @confirm="taskTimeConfirm('release',pickerReleaseTime)"
      />
    </van-popup>
    <van-popup v-model="endTimeShow" position="bottom" :style="{ height: '30%' }">
      <van-datetime-picker
        v-model="pickerEndTime"
        type="date"
        @confirm="taskTimeConfirm('end',pickerEndTime)"
      />
    </van-popup>
    <van-popup
      v-model="taskTargetShow"
      position="bottom"
      :style="{ height: '320px','padding-top' : '15px' }"
    >
      <van-tree-select
        :items="taskTargetList"
        :active-id.sync="activeTargets"
        :main-active-index.sync="activeIndex"
      />
    </van-popup>
  </div>
</template>
<script>
import Vue from "vue";
import VueQuillEditor from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { DatetimePicker, Toast } from "vant";
import { Popup } from "vant";
import { TreeSelect } from "vant";
import axios from "axios";
import { api } from "../assets/js/api";
import { WebSocketServer } from "../assets/js/websocket";
Vue.use(DatetimePicker)
  .use(VueQuillEditor)
  .use(Popup)
  .use(TreeSelect);
export default {
  data() {
    return {
      content: "",
      taskReleaseTime: "",
      taskEndTime: "",
      task_title: "",
      pickerReleaseTime: new Date(),
      pickerEndTime: new Date(),
      releaseTimeShow: false,
      endTimeShow: false,
      taskTargetShow: false,
      activeTargets: [],
      activeIndex: 0,
      targetName: {},
      targetShowName: "",
      taskTargetList: [
        { text: "全部", children: [] },
        { text: "我的部门", children: [] }
      ]
    };
  },
  watch: {
    activeTargets: function() {
      var targetShowName = "";
      this.activeTargets.forEach(item => {
        targetShowName += this.targetName[item] + ",";
      });
      this.targetShowName = targetShowName;
    }
  },
  methods: {
    releaseTask: function() {
      var task_target = "";
      this.activeTargets.forEach((item, index) => {
        index == 0 ? "" : (task_target += "-");
        task_target += item;
      });
      var data = {
        task_title: this.task_title,
        task_content: this.content,
        task_start: this.taskReleaseTime,
        task_end: this.taskEndTime,
        task_target: task_target
      };

      this.$axios.post(api.task.releaseTask, data).then(res => {
        res = res.data;
        if (res.code) {
          var user = localStorage.getItem("Now_User");
          user = JSON.parse(user);
          let socketData = {
            user_name: user.user_name,
            content : this.task_title
          };
          res.data.forEach(function(target_id) {
            WebSocketServer.sendPush({
              target: target_id,
              action: "Task",
              header: user.user_header,
              data: socketData
            });
          });

          Toast(res.msg);
          this.$router.goBack();
        } else {
          Toast(res.msg);
        }
      });
    },
    iniTactiveTargets() {
      this.$axios.post(api.task.getAllTarget).then(res => {
        this.taskTargetList[0].children = res.data.data;
        res.data.data.forEach(item => {
          this.targetName[item.id] = item.name;
        });
      });
      this.$axios
        .post(api.task.getAllTarget, { mode: "department" })
        .then(res => {
          this.taskTargetList[1].children = res.data.data;
        });
    },
    taskTimeConfirm(pick, value) {
      var date = new Date(value);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      var pickTime = year + "-" + month + "-" + day;
      if (pick == "end") {
        this.taskEndTime = pickTime;
        this.endTimeShow = false;
      } else {
        this.taskReleaseTime = pickTime;
        this.releaseTimeShow = false;
      }
    }
  },
  created() {
    this.iniTactiveTargets();
  }
};
</script>
<style>
#release-task-content {
  height: 572px;
  background-color: #ffffff;
  margin-top: 50px;
}
#release-task-content .ql-toolbar.ql-snow {
  border: 0;
}
</style>